<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>JS Threads</title>
	<script src="../lib/mootools-1.2.1-core-nc.js" type="text/javascript" charset="utf-8"></script>
	<script src="../lib/vacalib.js" type="text/javascript" charset="utf-8"></script>
	<script src="../lib/controllers/thread.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" charset="utf-8">
		$(window).addEvent('domready', function() {

			var count = 0;

			var Producer = new Class({
				ClassName: 'Consumer',
				Extends: Vaca.Controllers.Thread,
				execute: function() { 
					this.parent();

					var item = new Element('div');
					item.set('text', ++count).addClass('item').fade('hide').inject($('container'));
					new Fx.Morph(item, {
						onComplete: function() {
							item.addClass('ready');
						}
					}).start({
						opacity: 1
					});

					this.setInterval($('producer').value);
				}
			});

			var Consumer = new Class({
				ClassName: 'Consumer',
				Extends: Vaca.Controllers.Thread,
				execute: function() {
					this.parent();

					var item = $('container').getFirst('.ready');
					if (item && item.hasClass('ready')) {
						item.removeClass('ready');
						new Fx.Morph(item, {
							onComplete: function() {
								item.destroy();
							}
						}).start({
							opacity: 0
						});
					}

					this.setInterval($('consumer').value);
				}
			});

			$('add_producer').addEvent('click', function() {
				new Producer().start();
				$('producer_count').set('text', parseInt($('producer_count').get('text')) + 1);
			});
			$('add_consumer').addEvent('click', function() {
				new Consumer().start();
				$('consumer_count').set('text', parseInt($('consumer_count').get('text')) + 1);
			});

			new Producer().start();
			new Consumer().start();
			new Consumer().start();
			new Consumer().start();
			new Consumer().start();
		});
	</script>
	<style type="text/css" media="screen">
		.item {
			background-color: #86D3FF;
			border: solid 1px #09459F;
			color: black;
			float: left;
			font: 7px Arial;
			height: 15px;
			width: 25px;
			text-align: center;
			padding-top: 10px;
		}
	</style>
</head>
<body>
	<div>
		<label for="producer">Producer speed (items/sec):</label>
		<input type="text" name="producer" value="1000" id="producer">
		<input type="button" name="add_producer" value="+" id="add_producer">
		<!-- <input type="button" name="remove_producer" value="-" id="remove_producer"> -->
		<span id="producer_count">1</span>
	</div>
	<div>
		<label for="consumer">Consumer speed (items/sec):</label>
		<input type="text" name="consumer" value="5000" id="consumer">
		<input type="button" name="add_consumer" value="+" id="add_consumer">
		<!-- <input type="button" name="remove_consumer" value="-" id="remove_consumer"> -->
		<span id="consumer_count">4</span>
	</div>
	<div id="container"></div>
</body>
</html>
